---
id: timer
title: Timer
description: Used to record the time elapsed from zero or since a specified target time.
---

<ComponentPreview id="Timer" />

## Examples

Learn how to use the `Timer` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Countdown Timer

You can create a countdown timer by setting the `targetMs` prop to a future timestamp:

<Example id="countdown" />

### Timer Events

The Timer component provides events that you can listen to for various timer-related actions.

- The `onComplete` event is triggered when the timer reaches its target time.
- The `onTick` event is called on each timer update, providing details about the current timer state.

<Example id="events" />

### Using the Root Provider

The `RootProvider` component provides a context for the timer. It accepts the value of the `useTimer` hook. You can
leverage it to access the component state and methods from outside the timer.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="timer" />

### Context

These are the properties available when using `Timer.Context`, `useTimerContext` hook or `useTimer` hook.

<ContextType id="timer" />
